<template>
  <div class="wk-approve-flow-wrap">
    <el-button-group>
      <el-button
        :disabled="scale <= 0.5"
        icon="el-icon-minus"
        @click="scaleClick('minus')"
      />
      <el-button :disabled="scale > 3" icon="el-icon-plus" @click="scaleClick('plus')" />
    </el-button-group>
    <div
      :style="{
        transform: `scale(${scale})`,
      }"
      class="wk-approve-flow"
    >
      <wk-node
        v-if="sendNode"
        :visible-arrow="false"
        :node="sendNode"
        :parent="list"
        disabled
        header-color="#15388b"
      />
      <template v-for="(item, index) in list">
        <wk-condition-wrap
          v-if="item.examineType === 0"
          :key="index"
          :index="index"
          :node="item"
          :parent="list"
          @node-click="nodeClick"
        />
        <wk-node
          v-else
          :index="index"
          :key="index"
          :parent="list"
          :node="item"
          @node-click="nodeClick"
        />
      </template>
      <wk-end-node />
      <wk-condition-set
        :visible.sync="conditionSetVisible"
        :node="editNode"
        :condition-parent="conditionParent"
        :condition-parent-index="conditionParentIndex"
        :props="config"
      />
      <wk-node-set :visible.sync="nodeSetVisible" :node="editNode" :props="config" />
    </div>
  </div>
</template>

<script>
import WkNode from "./WkNode.vue";
import WkConditionWrap from "./WkConditionWrap";
import WkEndNode from "./WkEndNode.vue";
import merge from "@/utils/merge";
import NodeSetMixin from "./NodeSet";
import WkConditionSet from "./WkConditionSet.vue";
import WkNodeSet from "./WkNodeSet.vue";
const DefaultFlowProps = {
  // 条件选择数据参数
  conditionSelectRequest: null,
  conditionSelectParams: null,
};
export default {
  name: "WkApproveFlow",
  components: {
    WkNode,
    WkConditionWrap,
    WkEndNode,
    WkConditionSet,
    WkNodeSet,
  },
  data() {
    return {
      editNode: null,
      editNodeIndex: null,
      conditionParent: [],
      conditionParentIndex: 0,
      conditionSetVisible: false,
      nodeSetVisible: false,
      errorList: [],
      scale: 1,
    };
  },
  mixins: [NodeSetMixin],
  props: {
    props: {
      type: Object,
      default: () => {
        return {};
      },
    },
    sendNode: [Object, Function],
    list: Array,
  },
  computed: {
    config() {
      return merge({ ...DefaultFlowProps }, this.props || {});
    },
  },
  methods: {
    /**
     * 查看详情
     */
    nodeClick(data) {
      console.log(222, data);
      const { node, index, conditionParent } = data;
      this.editNode = node;
      if (node.examineType > 0) {
        this.nodeSetVisible = true;
      } else {
        this.conditionParent = conditionParent;
        this.conditionParentIndex = index;
        this.conditionSetVisible = true;
      }
    },
    /**
     * 缩放
     */
    scaleClick(type) {
      if (type === "minus") {
        this.scale = this.scale - 0.1;
      } else if (type === "plus") {
        this.scale = this.scale + 0.1;
      }
    },
  },
};
</script>

<style lang="scss">
@import "./flow.scss";
</style>
